<template>
  <div style="margin-bottom: 70px">
    <h4>跑得快~~~</h4>
    <div style=" height: 20px; vertical-align:center;text-align: left;font-size: 10px;margin-bottom: 10px">
        <van-icon name="location-o" />{{city}}
        <van-button @click="getCity" size="mini" style="font-size: 2px">
          点击获取城市
        </van-button>
      <span style="float: right;font-size: 15px;font-weight: bolder">{{timeTip}}:{{phone}}</span>
    </div>

<!--    轮播图-->
    <div>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <van-image src="https://img.zhichiwangluo.com/zcimgdir/album/file_5e6ef193d8fdc.png"></van-image>
        </van-swipe-item>
        <van-swipe-item>
          <van-image  src="https://img.zhichiwangluo.com/zcimgdir/album/file_5d1b2a61f130f.png"></van-image>
        </van-swipe-item>
        <van-swipe-item>
          <van-image src="https://img.zhichiwangluo.com/zcimgdir/album/file_5d1b2c2484d43.png"></van-image>
        </van-swipe-item>
      </van-swipe>
    </div>
<!--    美食类型-->
    <div>
      <van-grid gutter="10" id="gridimg">
        <van-grid-item icon="photo-o">
          <van-image @click="tz(1)" width="3rem"
                       height="3rem" round src="https://imgnew.zhichikeji.com/zcimgdir/album/file_5f96315335167.png"></van-image>
        </van-grid-item>
        <van-grid-item icon="photo-o">
          <van-image  @click="tz(2)"  width="3rem"
                       height="3rem" round src="https://imgnew.zhichikeji.com/zcimgdir/album/file_5f9631554c728.png"></van-image>
        </van-grid-item>
        <van-grid-item icon="photo-o">
          <van-image  @click="tz(3)"  width="3rem"
                       height="3rem" round src="https://imgnew.zhichikeji.com/zcimgdir/album/file_5f963154674a2.png"></van-image>
        </van-grid-item>
        <van-grid-item icon="photo-o">
          <van-image @click="tz(4)"  width="3rem"
                       height="3rem" round src="https://imgnew.zhichikeji.com/zcimgdir/album/file_5f96315242dce.png"></van-image>
        </van-grid-item>
        <van-grid-item icon="photo-o">
          <van-image @click="tz(5)"  width="3rem"
                       height="3rem" round src="https://imgnew.zhichikeji.com/zcimgdir/album/file_5f96315700eb5.png"></van-image>
        </van-grid-item>
        <van-grid-item icon="photo-o">
          <van-image @click="tz(6)"  width="3rem"
                       height="3rem" round src="https://imgnew.zhichikeji.com/zcimgdir/album/file_5f96315655c0a.png"></van-image>
        </van-grid-item>
        <van-grid-item icon="photo-o">
          <van-image @click="tz(7)"  width="3rem"
                       height="3rem" round src="https://imgnew.zhichikeji.com/zcimgdir/album/file_5f963153a8494.png"></van-image>
        </van-grid-item>
        <van-grid-item icon="photo-o">
          <van-image @click="tz(8)"  width="3rem"
                       height="3rem" round src="https://imgnew.zhichikeji.com/zcimgdir/album/file_5f963155cfaba.png"></van-image>
        </van-grid-item>
      </van-grid>
    </div>
<!--    系统公告-->
    <div>
        <van-notice-bar left-icon="volume-o" :scrollable="false">
          <van-swipe
              vertical
              class="notice-swipe"
              :autoplay="3000"
              :show-indicators="false"

          >
            <van-swipe-item>今天大促销啦 快来愉快的干饭吧！</van-swipe-item>
            <van-swipe-item>想吃好吃的？ 来 跟准潇潇雨下准没错！</van-swipe-item>
          </van-swipe>
        </van-notice-bar>
    </div>
<!--    热门推荐新店,热门美食,人气好店-->
    <div >
      <van-grid gutter="10" id="hot">
        <van-card span="12"
                  style="margin-bottom: 20px"
                  v-for="s in listtop"
                  :key="s.title"
                  @click="tz(s.id)"
                  :title="s.title"
                  :desc="s.info"
                  :thumb="s.imgurl"

        >
          <div class="hotstore" style="width: 100%">
            <p style="font-weight: bolder;font-size: 10px" >s.title</p>
            <p style="font-size: 10px">s.info</p>
            <van-image round style="width: 3rem;height: 3rem" :src="s.imgurl"></van-image>
          </div>
        </van-card>

      </van-grid>


    </div>
<!--    优惠券-->
    <div>
      <van-image  @click="receive()" src="https://imgnew.zhichikeji.com/zcimgdir/album/file_5f915b4a04bd9.png"></van-image>
    </div>
<!--    9.地图-->
    <div>
        <divhead title="你的位置" iconname="location"></divhead>
        <baidu-map style="height:200px" @ready="handler" :scroll-wheel-zoom='true'>
        </baidu-map>
    </div>

  </div>
</template>
<script>
  export default {
    name: 'index',
    data(){
      return{
        titlename:"",
        currmap:{},
        city:'',
        lating:'',
        lnging:'',
        phone:'',
        timeTip:'',
        listtop:[]
      }

    },
    mounted() {
      if(this.$store.state.token==0){
        this.$router.push("/m")
      }
      let date=new Date();
      if(date.getHours()>=0&&date.getHours()<12){
        this.timeTip="上午好"
      }else if(date.getHours()>=12&&date.getHours()<18){
        this.timeTip="下午好"
      }else{
        this.timeTip="晚上好"
      }
      this.axios.get("/api/user/selectone.do").then(res=>{
        console.log(res)
        this.phone=res.data.data.phone;
      })

    },
    methods: {
      getCity(){
        if(this.lating.length>0 && this.lnging.length>0){
          if(this.currmap.dh!=null){
            this.city = this.currmap.dh;
            this.$store.commit("setLat",this.lating);
            this.$store.commit("setLng",this.lnging);
          }
        }else {
          alert("亲，网络拥挤，请稍后定位~~")
        }
        this.axios.get("/api/store/orderBycomment.do?lngs="+this.lnging+"&lats="+this.lating).then(res=>{
          this.listtop = res.data.data;

        })
      },
      receive(){
        this.axios.get("/api/couponInfo/save?coupid="+1+"&uid="+1).then(res=>{
          if (res.data.code==200){
            this.$toast("领取优惠券成功")
          }else {
            this.$toast("领取优惠券失败")
          }
        })
      },
      handler ({BMap, map}) {
        this.currmap = map;
        var point = new BMap.Point(116.331398, 39.897445);
        map.centerAndZoom(point, 13);
        var geolocation = new BMap.Geolocation();
        var that = this;
        //先浏览器定位
        geolocation.getCurrentPosition(function (r) {
          if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            var mk = new BMap.Marker(r.point);
            map.addOverlay(mk);
            map.panTo(r.point);
            that.pcenter = r.point;
            this.citypoint = mk.point;
            var t = mk.point.lat;
            var l = mk.point.lng;
            that.lating = t+'';
            that.lnging = l+'';
            //String lngs,String lats
          } else {
            alert('failed' + this.getStatus());

            //浏览器定位失败，采用ip定位
            function myFun(result) {
              var cityName = result.name;
              map.setCenter(cityName);
            }

            var myCity = new BMap.LocalCity();
            myCity.get(myFun);

          }
        })
      },tz(id) {

        if (this.$store.state.lat.length > 0 && this.$store.state.lng.length > 0) {
          //路由传参
          if (id == 1) {
            this.titlename = "小吃"
          } else if (id == 2) {
            this.titlename = "快餐"
          } else if (id == 3) {
            this.titlename = "火锅"
          } else if (id == 4) {
            this.titlename = "粥品"
          } else if (id == 5) {
            this.titlename = "地方"
          } else if (id == 6) {
            this.titlename = "烧烤"
          } else if (id == 7) {
            this.titlename = "饮品"
          } else if (id == 8) {
            this.titlename = "汉堡"
          }
          this.$router.push({path: "/storeList", query: {nametitle: this.titlename}});
        }else {
          alert("亲，请先定位~~")
        }
      }

    }
  }
</script>

<style>
.notice-swipe {
  height: 40px;
  line-height: 40px;
}
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    text-align: center;
  }
  #gridimg van-image{
    padding: 10px 6px;
  }
  .hotstore{
    margin:4px 8px;
    background-color: papayawhip;
  }
</style>